<template>
    <div class="content_panel project_modules deal-list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('common.callRecord')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="5">
                        <el-form-item prop="orderId"><!--订单号-->
                            <el-input v-model="form.orderId" :placeholder="$t('common.orderId')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="user.skillTypeId !== 6 && user.skillTypeId !== 4" :span="5">
                        <el-form-item prop="userType"><!--用户类型-->
                            <el-select v-model="form.userType" clearable :placeholder="$t('common.userType')" style="width: 100%">
                                <el-option key="4" :label="$t('common.groupCollection')" value="4"></el-option>
                                <el-option key="6" :label="$t('common.groupAudit')" value="6"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="operator"><!--操作人-->
                            <el-input v-model="form.operator" :placeholder="$t('common.operator')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="number"><!--电话号码-->
                            <el-input v-model="form.number" :placeholder="$t('common.telephoneNumber')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="applyTime" label=""><!--拨打时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.callTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.callStartTime')"
                                    :end-placeholder="$t('common.callEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight">
                        <el-table-column prop="orderId" :label="$t('common.orderId')" min-width="120"></el-table-column><!--订单号-->
                        <el-table-column prop="operatorName" :label="$t('common.operator')" min-width="120"></el-table-column><!--操作人-->
                        <el-table-column prop="skillTypeId" :label="$t('common.userType')" min-width="120"><!--用户类型-->
                            <template slot-scope="{ row }">
                                <span v-if="row.skillTypeId === 4">{{ $t('common.groupCollection') }}</span>
                                <span v-if="row.skillTypeId === 6">{{ $t('common.groupAudit') }}</span>
                                <span v-if="row.skillTypeId === 7">{{ $t('common.companyAdmin') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="callPhone" :label="$t('common.telephoneNumber')" min-width="150"></el-table-column><!--电话号码-->
                        <el-table-column prop="type" :label="$t('common.type')" width="180"><!--类型-->
                            <template slot-scope="{ row }">{{ row.type | switchType }}</template>
                        </el-table-column>
                        <el-table-column prop="callStartTime" :label="$t('common.callTime')" min-width="150"><!--拨打时间-->
                            <template slot-scope="{ row }">{{ row.callStartTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="talkTime" :label="$t('common.callLength')" min-width="120"><!--通话时长（秒）-->
                            <template slot-scope="{ row }">{{ row.talkTime || 0 }}s</template>
                        </el-table-column>
                        <el-table-column prop="soundRecord" :label="$t('common.recording')" min-width="120"><!-- 录音 -->
                            <template slot-scope="{ row }">{{ row.soundRecord ? $t('common.presence') : $t('common.none') }}</template>
                        </el-table-column>
                        <el-table-column prop="operator" :label="$t('common.playRecording')" min-width="120"><!-- 播放录音 -->
                            <template slot-scope="{ row }"><a v-if="row.soundRecord === 1" :href="row.soundRecordFile" target="_blank" class="btn-play"></a></template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"></pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';

    let that = null;
    export default {
        name: 'operation-callManage-callRecord',
        components: {
            Pagination,
        },
        mixins: [mixin],
        data() {
            return {
                user: '',
                form: {
                    orderId: '',
                    userType: '',
                    operator: '',
                    number: '',
                    callTime: [],
                },
                rules: {
                },
                tableData: [],
            };
        },
        methods: {
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.operation.querycallrecordpage(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 240;
                });
            },
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: form.orderId,
                    skillTypeId: form.userType,
                    operatorName: form.operator,
                    callPhone: form.number,
                    startTime: '',
                    endTime: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    },
                };
                if (form.callTime && form.callTime.length) {
                    params.startTime = form.callTime[0];
                    params.endTime = form.callTime[1];
                }
                return params;
            },
        },
        filters: {
            switchType(val) {
                switch (val + '') {
                    case '2':
                        return that.$t('common.callOut');// 呼出
                    case '1':
                        return that.$t('common.callNotConntect');// 呼出未接通
                    case '0':
                        return that.$t('common.callEmpty');// 呼出空号
                    default:
                        return val
                }
            }
        },
        created() {
            that = this;
            this.user = this.$storage.get('user');
            if(this.user.skillTypeId === 6 || this.user.skillTypeId === 4) {// 信审6 催收4
                this.form.userType = this.user.skillTypeId;
            }
            this.getTableData({currentPage: this.page.currentPage}, this.form);
        },
    };
</script>

<style lang="scss">
    [data-page=operation-callManage-callRecord] {
        .el-col {
            padding-left: 10px;
        }
        .btn-play {
            display: block;
            width:32px;
            height:32px;
            background: url(~@/assets/img/play.png) no-repeat center center;
        }
    }
</style>
